<route>
    {
        meta: {
            layout: 'index',
            title:'人员管理'
        }
    }  
</route>
<template>
    <a-row>
        <a-col :span="6">
            <DepartTree @confirm="handleSearch"></DepartTree>
        </a-col>
        <a-col :span="18">
            <view>
                <a-row>
                    <a-input-search v-model:value="searchKey" placeholder="请输入名称"
                        style="width: 200px; margin-bottom: 10px; margin-right: 50px;" @search="onSearch()" />
                    <a-button type="primary" style="margin-bottom: 10px; width: 80px;" @click="add">
                        <template #icon><plus-outlined /></template>新增
                    </a-button>
                </a-row>
                <a-table :columns="columns" :data-source="dataSource" :scroll="{ x: 1000 }" :pagination="false">
                    <template #bodyCell="{ column, text, record }">
                        <!-- <template v-if="column.dataIndex === 'state'">
                            <a-tag color="green">{{ text }}</a-tag>
                        </template>
                        <template v-if="column.dataIndex === 'role'">
                            <a-tag closable @close="log">{{ text }}</a-tag>
                        </template> -->
                        <template v-if="column.dataIndex === 'action'">
                            <div>
                                <span>
                                    <a-button type="link" @click="editItem(record)">
                                        <FormOutlined />
                                    </a-button>
                                    <a-popconfirm title="确定删除该条记录 ?" @confirm="del(record.id)">
                                        <a-button type="link" danger>
                                            <DeleteOutlined />
                                        </a-button>
                                    </a-popconfirm>
                                    <a-dropdown>
                                        <a class="ant-dropdown-link" :style="{ color: 'black' }" @click.prevent>
                                            <DashOutlined />
                                        </a>
                                        <template #overlay>
                                            <a-menu>
                                                <a-menu-item><a @click="oppenRole">
                                                        <UsergroupAddOutlined />分配角色
                                                    </a></a-menu-item>
                                                <a-menu-item><a @click="oppenLeader">
                                                        <SettingOutlined />设置领导
                                                    </a></a-menu-item>
                                            </a-menu>
                                        </template>
                                    </a-dropdown>
                                </span>
                            </div>
                        </template>
                    </template>
                </a-table>
                <AntdZh>
                    <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total"
                        @change="getList" />
                </AntdZh>

                <AntdConfirmModal :title='title ? "新增人员" : "修改信息"' ref="modalRef" width="700px" :keepSlot="false"
                    @confirm="submitForm">
                    <a-form :model="form" name="basic" :label-col="{ span: 6 }">
                        <a-row>
                            <a-col :push="1" :span="20">
                                <a-row>
                                    <a-col :span="12">
                                        <a-form-item label="姓名" name="nickName"
                                            :rules="[{ required: true, message: '请输入姓名' }]">
                                            <a-input v-model:value="form.nickName" style="width: 150px;"
                                                placeholder="请输入姓名" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :pull="1" :span="12">
                                        <a-form-item label="部门ID" name="deptId">
                                            <a-input-number v-model:value="form.deptId" style="width: 150px;"
                                                controls-position="right" :min="0" />
                                        </a-form-item>
                                    </a-col>
                                    <a-col :span="12">
                                        <a-form-item label="性别" name="sex">
                                            <a-radio-group v-model:value="form.sex" button-style="solid">
                                                <a-radio-button value="男">男</a-radio-button>
                                                <a-radio-button value="女">女</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                    <a-col :pull="1" :span="12">
                                        <a-form-item label="在职状态" name="status">
                                            <a-radio-group v-model:value="form.status" button-style="solid">
                                                <a-radio-button value="1">在职</a-radio-button>
                                                <a-radio-button value="0">离职</a-radio-button>
                                            </a-radio-group>
                                        </a-form-item>
                                    </a-col>
                                </a-row>
                            </a-col>
                            <a-col :pull="1" :span="3">
                                <a-upload v-model:file-list="fileList" name="avatar" list-type="picture-card"
                                    class="avatar-uploader" :show-upload-list="false"
                                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76" :before-upload="beforeUpload"
                                    @change="handleChange">
                                    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
                                    <div v-else>
                                        <loading-outlined v-if="loading"></loading-outlined>
                                        <plus-outlined v-else></plus-outlined>
                                        <div class="ant-upload-text">Upload</div>
                                    </div>
                                </a-upload>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item label="手机" name="mobile">
                                    <a-input v-model:value="form.mobile" style="width: 200px;" controls-position="right" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="邮箱" name="email">
                                    <a-input v-model:value="form.email" style="width: 200px;" controls-position="right" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="账号" name="userName">
                                    <a-input v-model:value="form.userName" style="width: 200px;"
                                        controls-position="right" />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="登录密码" name="password">
                                    <a-input v-model:value="form.password" style="width: 200px;"
                                        controls-position="right" />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </AntdConfirmModal>

                <AntdConfirmModal title='分配角色' ref="roleModalRef" width="900px" :keepSlot="false" @confirm="submitRole">
                    <RolePopup @roleSelection="roleSelection"></RolePopup>
                </AntdConfirmModal>
                <AntdConfirmModal title='设置领导' ref="staffModalRef" width="900px" :keepSlot="false" @confirm="submitStaff">
                    <StaffPopup @staffSelection="staffSelection"></StaffPopup>
                </AntdConfirmModal>
            </view>
        </a-col>
    </a-row>
</template>
<script setup>
import DepartTree from '../../components/DepartTree';
import RolePopup from '../../components/RolePopup';
import StaffPopup from '@/custom/organization/components/StaffPopup'
import { PlusOutlined, FormOutlined, DeleteOutlined, UsergroupAddOutlined, SettingOutlined, DashOutlined, LoadingOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { queryList, queryRole, updateOne, deleteOne, createOne } from "../../api/users"
import { columns, formValue } from './index';
import useApp from "@/hooks";
const { $, proxy } = useApp();
const dataSource = ref([]);
const title = ref(null);
const modalRef = ref(null);
const roleModalRef = ref(null);
const staffModalRef = ref(null);
const total = ref(1)
const query = ref({ pageNum: 1, pageSize: 10, sortBy: 'id', searchKey: '' });
const form = ref(formValue);


const fileList = ref([]);
const loading = ref(false);
const imageUrl = ref('');
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
const handleChange = info => {
    if (info.file.status === 'uploading') {
        loading.value = true;
        return;
    }
    if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, base64Url => {
            imageUrl.value = base64Url;
            loading.value = false;
        });
    }
    if (info.file.status === 'error') {
        loading.value = false;
        message.error('upload error');
    }
};
// 头像上传格式限制
const beforeUpload = file => {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('You can only upload JPG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
};


//编辑
function editItem(e) {
    form.value = e
    title.value = false
    modalRef.value.openModal()
}
// 删除
const del = key => {
    deleteOne(key).then(res => {
        $.showToast({
            title: '删除成功',
            icon: 'success'
        })
        getList()
    })
}
// 新增
function add() {
    title.value = true
    form.value = formValue
    modalRef.value.openModal()
}
function oppenRole() {
    roleModalRef.value.openModal()
}
function oppenLeader() {
    staffModalRef.value.openModal()
}
// 提交
function submitForm() {
    if (title.value == true) {
        createOne(form.value).then(res => {
            $.showToast({
                title: '新增成功',
                icon: 'success'
            })
            modalRef.value.closeModal();
            getList()
        })
    } else if (title.value == false) {
        updateOne(form.value).then(res => {
            $.showToast({
                title: '更新成功',
                icon: 'success'
            })
            modalRef.value.closeModal();
            getList()
        })
    }
}
function handleSearch(key) {
    console.log(key);
}
// 搜索
function onSearch() {
    query.value.searchKey = searchKey;
    getList();
}
function roleSelection(e) {
    console.log(e);
}
function staffSelection(e) {
    console.log(e);
}
function getList() {
    queryList(query.value).then(res => {
        console.log(res)
        dataSource.value = res.content
        total.value = res.totalElements;
    })
}
getList()
</script>
<style scoped>
.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>